<template>
		<u-popup :show="show" :round="18" mode="bottom" @close="handleClose">
			<view class="slot-content" style="position: relative;margin: 0 24rpx;">
				<view class="modal-close" @click="handleClose">
					<u-icon name="close" size="28"></u-icon>
				</view>
				<view class="modal-title">选择标签</view>
				
				<view class="tags-contaner">
					<view v-for="(item, index) in tags" :key="index">
						<view class="tags-title">{{item.className}}</view>
						<view class="tags-content">
							<view class="tags-item" v-for="it in (item.tagItemVOList || [])" :key="it.value" :class="(!!selected.find(i => i.value === it.value)) ? 'active' : ''" @click="handleClick(it)">
								{{it.name}}
								<image v-if="!!selected.find(i => i.value === it.value)" src="https://static.wddzq.com/static/selected.png"></image>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			
			<view class="tags-footer">
				<u-button class="btn" @click="handleSubmit" customStyle="display: flex; flex-direction: column; height: 88rpx; border-radius: 88rpx;background-color: #030303;color: #fff;" color="#fff">
					<text>完成</text>
				</u-button>
			</view>
		</u-popup>
</template>

<script>
	import { to } from '../../../config/utils.js';
	import { getMerchantInfo } from '../../../config/api.js';
	
	export default {
		data() {
			return {
				tags: [],
				selected: [],
			}
		},
		emits: ['close', 'submit'],
		props: {
			show: {
				type: Boolean,
				default: false
			},
			close: {
				type: Function,
				default: null
			}
		},
		mounted() {
			this.fetchMerchantInfo();
		},
		methods: {
			handleClose() {
				this.$emit('close');
			},
			handleSubmit() {
				this.$emit('submit', this.selected);
			},
			handleClick(data) {
				let _tags = [...this.selected];
				if(_tags.find(item => item.value === data.value)) {
					_tags = _tags.filter(item => item.value !== data.value);
				} else {
					_tags.push(data);
				}
				this.selected = _tags;
			},
			async fetchMerchantInfo() {
				const [err, tagsData] = await to(getMerchantInfo());
				if(err) return;
				this.tags = tagsData?.data?.tagVOList || [];
				
				let result = [];
				(this.tags || []).forEach(item => {
					let _obj = {};
					let _selected = (item.tagItemVOList || []).filter(item => item.userSelected);
					result = result.concat(_selected);
				})
				this.selected = result;
				console.log(this.selected, 'result');
			},
		}
	}
</script>

<style>

/* 弹窗 */
.modal-close {
	position: absolute;
	top: 5rpx;
	right: -10rpx;
	width: 80rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-title {
	height: 40rpx;
	font-size: 32rpx;
	font-weight: 500;
	color: #333333;
	line-height: 40rpx;
	padding: 32rpx 0rpx;
	border-bottom: 1rpx solid #ddd;
}

.tags-contaner {
	min-height: 300rpx;
	max-height: 600rpx;
	overflow-y: auto;
}
.tags-content {
	display: flex;
	flex-wrap: wrap;
}
.tags-title {
	height: 36rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
	line-height: 36rpx;
	margin-bottom: 24rpx;
	margin-top: 32rpx;
}
.tags-item {
	width: 180rpx;
	height: 64rpx;
	line-height: 64rpx;
	background: #F2F2F2;
	border-radius: 8rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #666666;
	text-align: center;
	margin: 0 8rpx 8rpx 0;
	position: relative;
}
.tags-item image {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 32rpx;
	height: 32rpx;
}
.tags-item.active {
	background: rgba(255,143,31,0.1);
}

.tags-footer {
	padding: 24rpx;
	padding-bottom: 50rpx;
	border-top: 1rpx solid #ddd;
}
</style>
